<template>
  <div class="about">
    <my-header>
      <template #left>
          <van-icon name="arrow-left" @click="$router.back()"/>
      </template>
      <template #center>
          {{city.name}}
      </template>
      <template #right>
         切换城市
      </template>
    </my-header>
    <my-input @submit="search" v-model="inputVal"></my-input>
    <my-list :childrenList="list"></my-list>
  </div>
</template>
<script>
import myHeader from '../components/myHeader.vue'
import MyInput from '../components/myInput.vue'
import api from '../api/index'
import { reactive, toRefs } from 'vue';
import MyList from '../components/myList.vue';
export default {
  components: { myHeader, MyInput, MyList },
  setup(){

    const data = reactive({
      inputVal: '', // 输入框的值
      city:{}, // 城市信息
      list:[], // 附近商圈
    })
     api.get('/v1/cities/32').then(res => {
       data.city = res;
     })
     
    const search = () => { // 搜索
      api.get(`/v1/pois?type=search&city_id=32&keyword=${data.inputVal}`).then(res => {
       data.list = res;
     })
    }
    return{
      search,
      ...toRefs(data)
    }
  }
}
</script>
<style lang="scss" scoped>
  .about{
    height: 100%;
    background: #e9e9e9;
  }
</style>
